<template>
  <div class="page todo-list">
    <div class="scroll-view">
      <customHeader middleTitle="系统消息"></customHeader>
      <div class="page-body">
        <ul
          class="tab-container"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="30"
        >
          <li @click="linkToDetail(item)" v-for="(item,index) in list" :key="index">
            <div class="time">{{item.createTime?CommonUtil.timestampToTime(item.createTime):''}}</div>
            <div class="item">
              <div class="item-title">
                <span class="left">{{item.msgTitle}}</span>
                <span class="right"></span>
              </div>
              <div class="item-content">
                <ul>
                  <li>
                    <span class="left">门店名称</span>
                    <span v-if="item.msgContent" class="right">{{JSON.parse(item.msgContent)['shopName']}}</span>
                  </li>
                  <li>
                    <span class="left">门店ID</span>
                    <span v-if="item.msgContent" class="right">{{item.shopId}}</span>
                  </li>
                  <li v-if="item.msgTitleType==4||item.msgTitleType==6">
                    <span class="left">支付方式</span>
                   <span class="right">{{JSON.parse(item.msgContent)['payType']}}</span>
                  </li>
                  <li v-if="item.msgTitleType==3||item.msgTitleType==7">
                    <span class="left">变更后户名</span>
                    <span class="right">{{JSON.parse(item.msgContent)['afterAccountName']}}</span>
                  </li>
                  <li v-if="item.msgTitleType==3||item.msgTitleType==7">
                    <span class="left">变更后收款账号</span>
                    <span class="right">{{JSON.parse(item.msgContent)['afterCollectionAccount']}}</span>
                  </li>
                  <li v-if="item.msgTitleType==4||item.msgTitleType==6">
                    <span class="left">户名</span>
                    <span class="right">{{JSON.parse(item.msgContent)['accountName']}}</span>
                  </li>
                  <li v-if="item.msgTitleType==4||item.msgTitleType==6">
                    <span class="left">收款账号</span>
                    <span class="right">{{JSON.parse(item.msgContent)['collectionAccount']}}</span>
                  </li>
                  <li v-if="item.msgTitleType==5">
                    <span class="left">变更支付方式</span>
                    <span class="right">{{JSON.parse(item.msgContent)['updatePayType']}}</span>
                  </li>
                </ul>
              </div>
              <div class="item-option">
                <div class="option">查看详情</div>
              </div>
            </div>
          </li>
        </ul>
        <div v-show="noMore&&!hasError" class="no-more">已经全部加载完毕</div>
        <noData msg="暂无数据" v-if="hasError" />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import noData from "../../components/noData/noData";
import { Toast } from "mint-ui";
import jsBridge from "../../tools/jsBridge.js";
export default {
  name: "todoList",
  data() {
    return {
      CommonUtil: CommonUtil,
      loading: false,
      nextPage: 1,
      noMore: false,
      hasError: false,
      list: [],
      // msgTitleType的枚举值   
      // SHOP_OPEN_PAYMENT(1,"门店开通支付"),
      // CASH_BACK_MARKET_ACTIVTY(2,"返现营销活动"),
      // UPDATE_SETTLEMENT_ACCOUNT_APPLICATION_PASSED(3,"变更结算账号申请通过"),
      // REGISTER_SUCCESS(4,"进件成功"),
      // FEE_UPDATE_SUCCESS(5,"费率变更成功"),
      // REGISTER_OVERRULE(6,"进件被驳回"),
      // UPDATE_SETTLEMENT_ACCOUNT_APPLICATION_OVERRULE(7,"变更结算账号申请被驳回"),
    };
  },
  methods: {
    linkToDetail(item) {
      if (!item['shopId']) {
        Toast("缺少门店id");
        return;
      }
      this.$router.push({
        path: "/storeManage/gatheringManage",
        query: { shopId: item.shopId }
      });
    },
    loadData(page) {
      this.loading = true;
      if (page == undefined) {
        page = 1;
      }
      let url = "/newapp/AppMsg/getMsgList.do";
      let param = {
        currentPage: page,
        pageSize: 10,
        msgType: 2,//0待办事项，1通知公告，2系统消息
        msgStatusList: [1, 2, 3, 4]//消息状态：0未处理;1同意;2驳回;3已撤销;4已失效;
      };
      /*******redmine 5377************/
      // this.noMore = true;
      // this.loading = false;
      // this.hasError = true;
      // return;
      /*****************************/
      this.ajax({
        url: url,
        type: "post",
        data: param,
        controlLoading: false
      })
        .then(res => {
          if (res.success) {
            var data = res.resultObject;
            //最后一页将noMore设置为true
            if (data != null && JSON.stringify(data) != "{}") {
              this.list = this.list.concat(data.dataList);
              if (data.totalCount > this.list.length) {
                this.nextPage=this.nextPage+1;
              } else {
                this.noMore = true;
              }
            } else {
              this.noMore = true;
            }
            if (param.currentPage == 1 && data.dataList && data.dataList.length > 0 && data.dataList[0]['checkStatus'] === 0) {//调用接口标记为已读(checkStatus 0未查看;1已查看;)
              this.setRead();
            }
          } else {
            this.noMore = true;
            this.hasError = true;
            Toast(res.msg || '待办事项查询失败，请稍后重试');
          }
          this.loading = false;
          if (this.list.length == 0) {
            this.hasError = true;
          } else {
            this.hasError = false;
          }
        })
        .catch(err => {
          this.loading = false;
          this.noMore = true;
          if (this.list.length == 0) {
            this.hasError = true;
          } else {
            this.hasError = false;
          }
        });
    },
    //设置消息为已读
    setRead() {
      this.ajax({
        url: "/newapp/AppMsg/readAllMsg.do",
        type: "get",
        controlLoading: false
      })
        .then(res => {
          if (!res.success) {
            Toast(res.msg);
          } 
        })
        .catch(err => {
          
        });
    },
    //无限加载
    loadMore() {
      if (this.loading || this.noMore) {
        return;
      }
      this.loadData(this.nextPage);
    },
  },
  created() {
  },
  components: {
    customHeader,
    noData
  }
};
</script>
<style lang='scss' scoped>
@import "NotificationCenter";
</style>
